import React, { Component } from "react";

// 创建一个高阶组件
// 高阶组件的本质是一个函数
// 需要接受一个组件作为参数，并且返回一个新组件

// 高阶组件的作用就是封装和复用逻辑
// 还可以给组件去添加一些相同的html的模板，增加相同的属性等等
// 高阶组件就是用来增加组件的功能的

const hoc = (Comp) => {
  return class extends Component {
    state = {
      count: 1,
    };

    add = () => {
      this.setState((prevState) => {
        return {
          count: prevState.count + 1,
        };
      });
    };

    render() {
      return (
        <>
          <Comp {...this.props} count={this.state.count} onAdd={this.add} />
          <footer>@千锋教育</footer>
        </>
      );
    }
  };
};

// class Child extends Component {
//   state = {};
//   render() {
//     return (
//       <div>
//         child子组件 - {this.props.count} -{" "}
//         <button onClick={this.props.onAdd}>btn</button>-{" "}
//         <span>{this.props.name}</span>
//       </div>
//     );
//   }
// }

// const Child2 = hoc(Child);

const Child = hoc((props) => {
  return (
    <div>
      child子组件 - {props.count} - <button onClick={props.onAdd}>btn</button>-{" "}
      <span>{props.name}</span>
    </div>
  );
});
// const Child2 = hoc(Child);

class App extends Component {
  render() {
    return (
      <>
        <h2>高阶组件</h2>
        <Child name="tom" />
      </>
    );
  }
}

export default App;
